const HtmlWebpackPlugin = require("html-webpack-plugin");
const CopyPlugin = require("copy-webpack-plugin");
const webpack = require("webpack");

module.exports = {
    mode: 'development',
    devtool: 'source-map',
    entry: {
        home: './src/index.js',
        a: './src/a.js',
    },
    module: {
        rules: [
            {
                test: /\.(png)|(jpg)|(gif)$/,
                use: [
                {
                    loader: 'file-loader',
                    options: {
                        name: '[name].[hash:5].[ext]', // 这里hash的含义是file-loader规定的，与webpack的设定无关
                    }
                },
                {
                    loader: 'url-loader',
                    options: {
                        limit: true, // 不限制任何大小，所有经过loader的文件进行base64编码返回
                        // limit: 100 * 1024, // 只要文件不超过 100*1024 字节，就使用base64编码，否则交给file-loader处理
                    }
                }]
            }
        ],
    },
    output: {
        filename: 'scripts/[name].[chunkhash:5].js',
        clean: true,
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/template.html',
            filename: 'home.html',
            // chunks: 'all', // 默认全部打包的文件都会引用在 html 中
            chunks: ['home'], // 指定后就只会引用 home.js
        }),
        new CopyPlugin({
            patterns: [
                { from: './public/img', to: './img' },
            ]
        }),
        new webpack.DefinePlugin({
            PI: `Math.PI`,// const PI = Math.PI
            VERSION: `"1.0.0"`,// VERSION = "1.0.0"
            DOMAIN: JSON.stringify("baidu.com"),// DOMAIN = "baidu.com"
        }),
        new webpack.BannerPlugin({
            banner: `
            hash:[hash]
            chunk:[chunkhash]
            name:[name]
            `,
        }),
        new webpack.ProvidePlugin({
            $: 'jquery',
            _: 'lodash',
        })
    ],
    devServer: {
        port: 8000,
        open: true,
        static: {
            directory: './public', // 指定静态文件目录
            serveIndex: true, // 可选：是否生成目录列表
        },
        devMiddleware: {
            index: 'home.html', // 指定默认打开的文件（必须放在 devMiddleware 下）
        },
        proxy: { //代理规则
            '/api': {
                target: 'xxx',
                changeOrigin: true,// 更改请求头中的host和origin
            }
        }
    }
}